@match-color_1: #2d8cf0;
@match-color_2: #a6feff;
@match-color_3: #ff9335;
@match-color_4: #f82d1e;
@match-color_5: #fff600;
@match-color_6: #ffb00f;
@match-color_7: #17ffc0;
@match-color_8: #0daf80;
@mainColor: #f47618;

.shadow-base {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
  
  .shadow-light {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .cp {
    cursor: pointer;
  }
  .usn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  // 高度等于行高
  .hg-eq-lhg (@h) {
    height: @h;
    line-height: @h;
  }
  
  // 去除内外边距
  .no-mg-pd {
    margin: 0;
    padding: 0;
  }
  // flex 布局
  .frow {
    flex-direction: row;
    display: flex;
  }
  
  .fcol {
    flex-direction: column;
    display: flex;
  }
  
  .fww {
    display: flex;
    flex-wrap: wrap;
  }
  
  //主轴两端对齐
  .fjcsb {
    justify-content: space-between;
    display: flex;
  }
  
  //主轴末对齐
  .fjcfe {
    justify-content: flex-end;
    display: flex;
  }
  
  //主轴 两端对齐
  .fjcsa {
    justify-content: space-around;
    display: flex;
  }
  
  //主轴居中
  .fjcc {
    justify-content: center;
    display: flex;
  }
  // 多根轴线 靠前
  .facfs {
    align-content: flex-start;
    display: flex;
  }
  //多根轴线 两端对齐
  .facsb {
    align-content: space-between;
    display: flex;
  }
  
  //多根轴线 居中
  .facc {
    align-content: center;
    display: flex;
  }
  
  //交叉轴居中
  .faic {
    display: flex;
    align-items: center;
  }
  .faife{
    display: flex;
    align-items:flex-end;
  }
  
  .flex1 {
    flex: 1;
  }
  
  .pr15 {
    padding-right: 15px;
  }
  
  .p15 {
    padding: 15px;
  }
  
  .p20 {
    padding: 20px;
  }
  
  .mb5 {
    margin-bottom: 5px;
  }
  
  .mt5 {
    margin-top: 5px;
  }
  
  .mr5 {
    margin-right: 5px;
  }
  
  .ml5 {
    margin-left: 5px;
  }
  
  .mb10 {
    margin-bottom: 10px;
  }
  
  .mt10 {
    margin-top: 10px;
  }
  
  .mr10 {
    margin-right: 10px;
  }
  
  .ml10 {
    margin-left: 10px;
  }
  .mr15 {
    margin-right: 15px;
  }
  .ml15 {
    margin-left: 15px;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  
  .mt20 {
    margin-top: 20px;
  }
  
  .mr20 {
    margin-right: 20px;
  }
  
  .ml20 {
    margin-left: 20px;
  }
  
  .mb30 {
    margin-bottom: 30px;
  }
  
  .mr30 {
    margin-right: 30px;
  }
  
  .mt30 {
    margin-top: 30px;
  }
  
  .ml30 {
    margin-left: 30px;
  }
  
  .mb40 {
    margin-bottom: 40px;
  }
  
  .mr40 {
    margin-right: 40px;
  }
  
  .mt40 {
    margin-top: 40px;
  }
  
  .ml40 {
    margin-left: 40px;
  }
  
  .w100p{
    width:100px;
  }